<template>

  <div>
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="bysQuery.xm" placeholder="学生姓名"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="bysQuery.xh" placeholder="学号"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="bysQuery.xy" clearable placeholder="学院" @change = "getbj(bysQuery.xy)">
          <el-option
            v-for = "(xym,index) in xyList" :key="index" :label="xym" :value="xym" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="bysQuery.bh" clearable placeholder="班级">
          <el-option
            v-for = "(bj,index) in bjList" :key="index" :label="bj" :value="bj" />
        </el-select>
      </el-form-item>

         <el-form-item>
        <el-select v-model="bysQuery.xwzg" clearable placeholder="学位资格">
          <el-option value="有" label="有"/>
          <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>

       <el-form-item>
        <el-select v-model="bysQuery.byzg" clearable placeholder="毕业资格">
           <el-option value="有" label="有"/>
           <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="getbysListByCondition()">查询</el-button>
      <el-button type="default" @click="clear()">清空</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
      <el-button type="danger" @click="showNewDialog()" :disabled="(!isOpTime&&role!='admin')||(department!='校级')">新增</el-button>

    </el-form>
<el-form label-width="90px">
  <el-row>

    <el-col :span="5" style="width:300px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="'/static/bysTemplate.xlsx'">点击下载模版</a>
        </el-tag>

      </el-form-item>
    </el-col>

     <el-col :span="5" style="width:300px">
      <el-form-item>
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled&&!isOpTime&&role!='admin'"
          :limit="1"
          :action="BASE_API+'/excel/importbys'"
          name="file"
          accept=".xlsx">
          <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="medium"
            type="success"
            @click="submitUpload" :disabled="!isOpTime&&role!='admin'">导入</el-button>
        </el-upload>
      </el-form-item>
    </el-col>

     <el-col :span="7.5">
          <el-form-item label="操作时间">
            <el-tag style="background-color:antiquewhite">
              <span style="color:black; font-size:14px">开始时间</span> <span
                style="color:black; font-size:16px"><b>{{startTime}}</b></span>
            </el-tag>
            <el-tag style="background-color:antiquewhite">
              <span style="color:black; font-size:14px">结束时间</span> <span
                style="color:black; font-size:16px"><b>{{endTime}}</b></span>
            </el-tag>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="当前状态">
            <el-tag v-if="isOpTime&&role!='admin'" style="background-color: #67c23a;"><span
                style="font-size:18px; color: white;">可操作</span></el-tag>
            <el-tag v-if="!isOpTime&&role!='admin'" style="background-color: #f56c6c;">
              <span v-if="!isOpTime&&role!='admin'" style="font-size:18px; color: white;"><b>不可操作（不在操作时间内）</b></span>
            </el-tag>
            <el-tag v-if="role=='admin'" style="background-color: #67c23a;"><span
                style="font-size:18px; color: white;">可操作【管理员】</span></el-tag>
          </el-form-item>
        </el-col>

  </el-row>

</el-form>



  <!--数据列表-->
    <el-scrollbar>
    <el-table
    :data="xssjList"
    border
    style="width: 100%">


    <el-table-column
      prop="xh"
      label="学号"
      width="130">
    </el-table-column>

    <el-table-column
       prop="xm"
      label="姓名"
      width="80">
    </el-table-column>

    <el-table-column
      prop="xy"
      label="学院">
    </el-table-column>

      <el-table-column
      prop="zyh"
      label="专业名称">
    </el-table-column>

      <el-table-column
      prop="bh"
      label="班级">
    </el-table-column>

      <el-table-column
      prop="bjg"
      label="历年不及格课程">
    </el-table-column>

      <el-table-column
      prop="ggxx"
      label="公共选修">
    </el-table-column>

      <el-table-column
      prop="tsxx"
      label="特色选修">
    </el-table-column>

          <el-table-column
      prop="xkxx"
      label="学科选修">
    </el-table-column>

          <el-table-column
      prop="zyxx"
      label="专业选修">
    </el-table-column>

      <el-table-column
      prop="kwxx"
      label="课外选修">
    </el-table-column>

     <el-table-column
      prop="wygt"
      label="外语沟通">
    </el-table-column>

    <el-table-column
      prop="jd"
      label="平均绩点"
      width="80">
    </el-table-column>

    <el-table-column
      prop="xwjd"
      label="学位绩点"
      width="80">
    </el-table-column>

    <el-table-column
      prop="wj"
      label="违纪类型">
    </el-table-column>

    <el-table-column
      prop="byzg"
      label="毕业资格"
      width="50">
    </el-table-column>

    <el-table-column
      prop="xwzg"
      label="学位资格"
      width="50">
    </el-table-column>

    <el-table-column
      prop="bz"
      label="状态"
      width="60">
    </el-table-column>

    <el-table-column
      prop="address"
      label="操作"
      width="200">
      <template slot-scope="scope" class="inline-block">
        <el-button type = "primary" size="mini" icon="el-icon-edit" @click ="showDialogAndDate(scope.row.id)" :disabled="!isOpTime&&role!='admin'">修改</el-button>
        <el-button type = "danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)" :disabled="(!isOpTime||department!='校级')&&role!='admin'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-scrollbar>
  <!--分页-->
  <el-pagination
  background
  layout="prev, pager, next ,jumper, total"
  :current-page="page"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center"
  @current-change = "getbysListByCondition"
  >
 </el-pagination>

 <!--新增弹窗-->
<el-dialog :visible.sync="SavedialogFormVisible" title="新增数据">
    <el-form :model="saveBys" label-width="100px">
        <el-form-item label="姓名">
            <el-input style="width:30%" v-model="saveBys.xm"/>
        </el-form-item>
        <el-form-item label="学号">
            <el-input style="width:30%" v-model="saveBys.xh" />
        </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="saveBys.xy" clearable placeholder="学院" @change = "getbj(saveBys.xy)">
          <el-option
            v-for = "(xym,index) in xyList" :key="index" :label="xym" :value="xym" />
        </el-select>
      </el-form-item>
      <el-form-item label="专业">
        <el-select v-model="saveBys.zyh" clearable placeholder="学院" >
          <el-option
            v-for = "(zyh,index) in zyList" :key="index" :label="zyh" :value="zyh" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="saveBys.bh" clearable placeholder="班级">
          <el-option
            v-for = "(bj,index) in bjList" :key="index" :label="bj" :value="bj" />
        </el-select>
      </el-form-item>
        <el-form-item label="历年不及格">
            <el-input style="width:30%" v-model="saveBys.bjg" />
        </el-form-item>
        <el-form-item label="公共选修">
            <el-input style="width:30%" v-model="saveBys.ggxx"/>
        </el-form-item>
        <el-form-item label="特色选修">
            <el-input style="width:30%" v-model="saveBys.tsxx" />
        </el-form-item>
        <el-form-item label="学科选修">
            <el-input style="width:30%" v-model="saveBys.xkxx"/>
        </el-form-item>
        <el-form-item label="专业选修">
            <el-input style="width:30%" v-model="saveBys.zyxx" />
        </el-form-item>
        <el-form-item label="课外选修">
            <el-input style="width:30%" v-model="saveBys.kwxx" />
        </el-form-item>
        <el-form-item label="外语沟通">
            <el-input style="width:30%" v-model="saveBys.wygt"/>
        </el-form-item>
        <el-form-item label="平均绩点">
            <el-input style="width:30%" v-model="saveBys.jd" />
        </el-form-item>
        <el-form-item label="学位绩点">
            <el-input style="width:30%" v-model="saveBys.xwjd" />
        </el-form-item>
        <el-form-item label="违纪">
            <el-input style="width:30%" v-model="saveBys.wj" />
        </el-form-item>
        <el-form-item label="毕业资格">
          <el-select v-model="saveBys.byzg" clearable placeholder="毕业资格">
            <el-option value="有" label="有"/>
            <el-option value="无" label="无"/>
          </el-select>
        </el-form-item>
        <el-form-item label="学位资格">
          <el-select v-model="saveBys.xwzg" clearable placeholder="毕业资格">
            <el-option value="有" label="有"/>
            <el-option value="无" label="无"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="saveBys.bz" clearable placeholder="状态">
            <el-option value="毕业" label="毕业"/>
            <el-option value="结业" label="结业"/>
            <el-option value="延长" label="延长"/>
          </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="SavedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
    </div>
</el-dialog>


 <!--修改弹窗-->
<el-dialog :visible.sync="dialogFormVisible" title="修改数据">
    <el-form :model="updateBys" label-width="120px">
        <el-form-item label="姓名">
            <el-input style="width:30%" v-model="updateBys.xm" readonly='true'/>
        </el-form-item>
        <el-form-item label="学号">
            <el-input style="width:30%" v-model="updateBys.xh" readonly='true'/>
        </el-form-item>
            <el-form-item label="学院">
            <el-input style="width:30%" v-model="updateBys.xy" readonly='true'/>
        </el-form-item>
        <el-form-item label="专业名称">
            <el-input style="width:30%" v-model="updateBys.zyh" readonly='true'/>
        </el-form-item>
            <el-form-item label="班级">
            <el-input style="width:30%" v-model="updateBys.bh" readonly='true'/>
        </el-form-item>
        <el-form-item label="历年不及格">
            <el-input style="width:30%" v-model="updateBys.bjg" />
        </el-form-item>
        <el-form-item label="公共选修">
            <el-input style="width:30%" v-model="updateBys.ggxx"/>
        </el-form-item>
        <el-form-item label="特色选修">
            <el-input style="width:30%" v-model="updateBys.tsxx" />
        </el-form-item>
        <el-form-item label="学科选修">
            <el-input style="width:30%" v-model="updateBys.xkxx"/>
        </el-form-item>
        <el-form-item label="专业选修">
            <el-input style="width:30%" v-model="updateBys.zyxx" />
        </el-form-item>
        <el-form-item label="课外选修">
            <el-input style="width:30%" v-model="updateBys.kwxx" />
        </el-form-item>
        <el-form-item label="外语沟通">
            <el-input style="width:30%" v-model="updateBys.wygt"/>
        </el-form-item>
        <el-form-item label="平均绩点">
            <el-input style="width:30%" v-model="updateBys.jd" />
        </el-form-item>
        <el-form-item label="学位绩点">
            <el-input style="width:30%" v-model="updateBys.xwjd" />
        </el-form-item>
        <el-form-item label="违纪">
            <el-input style="width:30%" v-model="updateBys.wj" />
        </el-form-item>
      <el-form-item label="毕业资格">
        <el-select v-model="updateBys.byzg" clearable placeholder="毕业资格">
          <el-option value="有" label="有"/>
          <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>
      <el-form-item label="学位资格">
        <el-select v-model="updateBys.xwzg" clearable placeholder="毕业资格">
          <el-option value="有" label="有"/>
          <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="updateBys.bz" clearable placeholder="状态">
          <el-option value="毕业" label="毕业"/>
          <el-option value="结业" label="结业"/>
          <el-option value="延长" label="延长"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
    </div>
</el-dialog>

  </div>

</template>

<script>
import bysapi from '@/api/byssj.js'
import fileDownload from 'js-file-download'
import bjapi from '@/api/bjxx.js'
import authapi from '@/api/Sauth.js'

  export default {
    data() {
     return {
       bjList:{},
       xyList:{},
       zyList:{},
       xssjList:null,
       page:1,
       limit:20,
       total:0,
       bysQuery:{},
       exportQuery:{},
       BASE_API: process.env.BASE_API, // 接口API地址
       loading: false,
       importBtnDisabled: false, // 按钮是否禁用
       updateBys:{},//修改按钮数据
       saveBys:{},//新增按钮数据
       dialogFormVisible: false,//弹窗
       SavedialogFormVisible: false,//弹窗
       role:{},//角色admin/user
       department:{},//部门
       isOpTime:{},//是否在可操作时间
       Fname:'F101',//功能所属编号
       startTime:{},
       endTime:{},
      }
    },

    created(){
      this.getAllbysList()
      this.getxy()
      this.getAuth()
      this.getOpTime()
      this.getDept()
    },

    methods:{

      //权限获取
      getAuth(){
        authapi.getRole().then(response=>{
          this.role = response.data.role
        })
      },

      //院校级检查
      getDept(){
         authapi.getDept().then(response=>{
              this.department = response.data.department
         })
      },

      //是否在可操作时间
      getOpTime(){
       authapi.getOpTime(this.Fname).then(response=>{
          this.isOpTime = response.data.isTime
          this.startTime = response.data.startTime
          this.endTime = response.data.endTime
       })
      },

    //新增一条按钮
      save(){
        bysapi.save(this.saveBys).then(response=>{
          this.$message({
              type: 'success',
              message: '新增成功!'
          })
           this.SavedialogFormVisible=false
          this.getAllbysList()
        })

      },

    //显示新增弹窗
      showNewDialog(){
         this.SavedialogFormVisible=true
      },

    //修改按钮
      update(){
          bysapi.updateById(this.updateBys).then(response=>{
            this.$message({
                type: 'success',
                message: '修改成功!'
            })
            this.dialogFormVisible=false
            this.getAllbysList()
          })
      },
  //显示修改弹窗
  showDialogAndDate(id){
        bysapi.getbysById(id).then(response=>{
          this.updateBys = response.data.bys
        })

        this.dialogFormVisible=true
    },

      getxy(){
        bjapi.getXy().then(response=>{
          this.xyList = response.data.xylist
        })
      },

      getbj(xym){
        bjapi.getBjByXy(xym).then(response=>{
          this.bjList = response.data.bjList
          this.zyList = response.data.zyList
        })
      },



      fileUploadSuccess(response){
        if (response.success === true) {
        this.fileUploadBtnText = '导入成功'
        this.loading = false
        this.$message({
        type: 'success',
        message: response.message
      })
      setTimeout("location.reload()", 1500 )

    }
      },

      fileUploadError(){
        this.fileUploadBtnText = '导入失败'
        this.loading = false
        this.$message({
        type: 'error',
          message: '导入失败'
          })
      },

      submitUpload(){
          this.fileUploadBtnText = '正在上传'
          this.importBtnDisabled = true
          this.loading = true
          this.$refs.upload.submit()
      },



      clear(){
          this.bysQuery = {}
          this.getAllbysList()
      },

      exportExcel(){
        bysapi.exportdata(this.exportQuery).then((res)=>{
            fileDownload(res, '毕业生信息表.xlsx')
          });
      },




      getAllbysList(page=1){
        this.page = page
        bysapi.getbyssj(this.page,this.limit).then(response=>{
          this.xssjList = response.data.list
          this.total = response.data.total
        })
      },

      getbysListByCondition(page=1){
         this.page = page
         bysapi.byssjPageCondition(this.page,this.limit,this.bysQuery)
          .then(response=>{
              this.total = response.data.total
              this.xssjList = response.data.list

              //查询之后更新导出的数据为所查询数据
              this.exportQuery = this.bysQuery
              //清空查询条件
              this.bysQuery = {}
          })
      },

      removeDataById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return bysapi.removeById(id)
    }).then(() => {

        this.getbysListByCondition()
        this.$message({
            type: 'success',
            message: '删除成功!'
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
    })
},



    }


  }
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
